<template>
   <div class="agritainment">
      <img :src="agritainmentArr.img" @click="goDetail(agritainmentArr.id)" />
      <div class="name">{{ agritainmentArr.title }}</div>
   </div>
</template>
<script>
export default {
   name: 'Agritainment',
   components: {

   },
   mixins: [],
   props: ['agritainmentArr'],
   data() {
      return {

      }
   },
   computed: {

   },
   watch: {

   },
   mounted() {
   },
   methods: {
      goDetail(id) {
         this.$router.push({
            path: '/detail',
            query: {
               id
            }
         })
      }
   }
};
</script>
<style lang='less' scoped>
.agritainment {
   width: 100%;
   height: 250px;

   .name {
      width: 100%;
      text-align: center;
      margin-top: -30px;
   }

   img {
      width: 100%;
      height: 180px;
      border-radius: 10px;
      cursor: pointer;

   }
}
</style>